<template>
  <div>
    <div class="tag_div">
      <!--  1、输入框    -->
      <div class="tag_div_header">
        <div style="margin-top: 15px">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            class="input-with-select"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="java" value="1"></el-option>
              <el-option label="c++" value="2"></el-option>
              <el-option label="pycharm" value="3"></el-option>
              <el-option label="大数据分析" value="4"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectGO"
            ></el-button>
          </el-input>
        </div>
      </div>

      <!--     2、 表单-->
      <div class="tag_div_main" style="height: 60vh">
        <el-table
          :data="tagArr"
          style="width: 100%; margin: 0 auto"
          height="59vh"
          class="tag_div_table"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item>
                  <h3 class="title-name">{{ props.row.title }}</h3>
                </el-form-item>
                <el-form-item label="时间">
                  <span>{{ props.row.time }}</span>
                </el-form-item>
                <el-form-item label="内容">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column label="类别" prop="id"> </el-table-column>
          <el-table-column label="标题" prop="con"> </el-table-column>

          <el-table-column label="点击量" type="index" width="100">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteUser(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--    3、分页  -->
      <div class="tag_div_footer">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
@import url(../../css/tag.css);
</style>
<script src="../../js/tag.js"></script>
